---
type: tutorial
title: Añadir estilo a todo el sitio
i18nReady: true
description: |-
  Tutorial: Crea tu primer blog con Astro —
  Crea una hoja de estilo global para el estilo de todo el sitio
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ahora que ya tienes una página 'Acerca de' con estilo, ¡es hora de añadir algunos estilos globales para el resto del sitio!

<PreCheck>
  - Aplicar estilos globalmente
</PreCheck>

## Añade una hoja de estilo global

Has visto que la etiqueta de Astro `<style>` tiene su propio **alcance por defecto**, lo que significa que sólo afecta a los elementos de su propio archivo.

Hay varias formas de definir estilos **globales** en Astro, pero en este tutorial, crearás e importarás un archivo `global.css` en cada una de tus páginas. Esta combinación de hoja de estilos y etiqueta `<style>` te da la capacidad de controlar algunos estilos en todo el sitio, y aplicar algunos estilos específicos exactamente donde quieras.

<Steps>
1. Crea un nuevo archivo en la ubicación `src/styles/global.css` (Primero tendrás que crear una carpeta `styles`).

2. Copia el siguiente código en tu nuevo archivo, `global.css`.

    ```css title="src/styles/global.css"
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }
    ```

3. En `about.astro`, añade la siguiente sentencia import a tu frontmatter: 

    ```astro title="src/pages/about.astro" ins={2}
    ---
    import '../styles/global.css';

    const pageTitle = "Sobre mi";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Escritor técnico",
      hobbies: ["fotografia", "observación de aves", "peñarol"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];

    const happy = true;
    const finished = false;
    const goal = 3;

    const skillColor = "navy";
    const fontWeight = "bold";
    const textCase = "uppercase";
    ---
    ```

4. Comprueba la vista previa del navegador de tu página 'Acerca de' y ahora debería ver los nuevos estilos aplicados.
</Steps>

<Box icon="puzzle-piece">

## Pruébalo tu mismo - Importa tu hoja de estilo global

Añade la línea de código necesaria a cada archivo `.astro` de tu proyecto para aplicar tus estilos globales a cada página de tu sitio.

<details>
<summary>✅ ¡Enséñame el código! ✅</summary>

Añade la siguiente sentencia import a los otros dos archivos de página: `src/pages/index.astro` y `src/pages/blog.astro`.

```astro title="src/pages/index.astro" ins={2}
---
import '../styles/global.css';
---
```
</details>
</Box>

Realiza cualquier cambio o adición que deseas en el contenido de tu página 'Acerca de' añadiendo elementos HTML a la plantilla de la página, ya sea de forma estática o dinámica. Escribe cualquier JavaScript adicional en tu script frontmatter para proporcionarle valores para usar en tu HTML. Cuando estés satisfecho con esta página, confirma tus cambios en GitHub antes de pasar a la siguiente lección.

<Box icon="question-mark">
### Analiza el patrón

Tu página 'Acerca de' ahora tiene estilo usando *ambos* el archivo importado `global.css` *y* una etiqueta `<style>`.

- ¿Se aplican los estilos de ambos métodos de estilización?

    <p>
      <Spoiler>Si</Spoiler>
    </p>

- ¿Existen estilos contradictorios y, en caso afirmativo, cuál se aplica?

    <p>
      <Spoiler>Sí, `<h1>` tiene un tamaño de `2.5rem` globalmente, pero `4rem` localmente en la etiqueta `<style>`. La regla `4rem` local se aplica en la página 'Acerca de'.</Spoiler>
    </p>

- Describe cómo funcionan juntos `global.css` y `<style>`.

    <p>
      <Spoiler>Cuando se definen estilos contradictorios tanto a nivel global como en la etiqueta local `<style>` de una página, los estilos locales deberían sobrescribir cualquier estilo global. (Pero puede haber otros factores implicados, así que inspecciona siempre visualmente tu sitio para asegurarte de que los estilos se aplican correctamente).</Spoiler>
    </p>

- ¿Cómo decidir si declarar un estilo en un archivo `global.css` o en una etiqueta `<style>`?

    <p>
      <Spoiler>Si quieres que un estilo se aplique a todo el sitio, elige un archivo `global.css`. Sin embargo, si desea que los estilos se apliquen sólo al contenido HTML de un único archivo `.astro` y no afecten a otros elementos del sitio, deberá elegir una etiqueta `<style>`.</Spoiler>
    </p>

</Box>



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Puedo añadir estilos CSS globales importando un archivo `.css`.
</Checklist>
</Box>

### Recursos
- [Comparación entre la sintaxis Astro y JSX](/es/basics/astro-syntax/#diferencias-entre-astro-y-jsx)

- [Etiqueta Astro `<style>`.](/es/guides/styling/#estilando-en-astro)

- [Variables CSS en Astro](/es/guides/styling/#variables-de-css)